<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>员工列表</title>
    <%--jQuery--%>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.3.1.min.js" ></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
</head>
<body>

    <div class="container">
        <%--标题--%>
        <div class="col-md-12">
            <h1>SSM_CRUD</h1>
        </div>
        <%--按钮--%>
        <div class="col-md-4 col-md-offset-8">
            <button class="btn btn-primary">添加</button>
            <button class="btn btn-danger">删除</button>
        </div>
        <%--数据表格--%>
        <div class="col-md-12">
            <table class="table table-hover">
                <%--表头--%>
                <tr>
                    <th>#</th>
                    <th>empName</th>
                    <th>gender</th>
                    <th>empEmail</th>
                    <th>deptName</th>
                    <th>操作</th>
                </tr>
                <%--循环遍历数据信息--%>
                <c:forEach items="${pageInfo.list}" var="emp" varStatus="s">
                    <tr>
                        <td>${s.count}</td>
                        <td>${emp.empName}</td>
                        <td>${emp.gender}</td>
                        <td>${emp.email}</td>
                        <td>${emp.department.deptName}</td>
                        <td>
                            <button class="btn btn-primary btn-sm">
                                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                                修改
                            </button>
                            <button class="btn btn-danger btn-sm">
                                <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                                删除
                            </button>
                        </td>
                    </tr>
                </c:forEach>
            </table>
        </div>
        <%--分页情况--%>
        <div class="">
            <%--分页信息--%>
            <div class="col-md-4">
                当前第${pageInfo.pageNum}页 共${pageInfo.pages}页 共${pageInfo.total}条数据
            </div>
            <%--分页条--%>
            <div class="col-md-4 col-md-offset-4">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <%--首页一直展示--%>
                        <li><a href="${pageContext.request.contextPath}/emp/findAll">首页</a></li>
                        <%--如果不是首页， 那么才展示上一页--%>
                        <c:if test="${!pageInfo.isFirstPage}">
                            <li>
                                <a href="${pageContext.request.contextPath}/emp/findAll?pageNum=${pageInfo.isFirstPage ? 1 : pageInfo.prePage}" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                        </c:if>

                        <c:forEach items="${pageInfo.navigatepageNums}" var="pageNum">
                            <%--判断，如果是当前页， 那么按钮高亮显示--%>
                            <c:if test="${pageNum == pageInfo.pageNum}">
                                <li class="active"><a href="${pageContext.request.contextPath}/emp/findAll?pageNum=${pageNum}">${pageNum}</a></li>
                            </c:if>
                            <c:if test="${pageNum != pageInfo.pageNum}">
                                <li><a href="${pageContext.request.contextPath}/emp/findAll?pageNum=${pageNum}">${pageNum}</a></li>
                            </c:if>

                        </c:forEach>

                        <%--判断如果当前页不是最后一页， 那么就显示下一页--%>
                        <c:if test="${pageInfo.pageNum != pageInfo.pages}">
                            <li>
                                <a href="${pageContext.request.contextPath}/emp/findAll?pageNum=${pageInfo.nextPage}" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </c:if>
                        <%--尾页一直显示--%>
                        <li><a href="${pageContext.request.contextPath}/emp/findAll?pageNum=${pageInfo.pages}">尾页</a></li>

                    </ul>
                </nav>
            </div>
        </div>

    </div>

</body>
</html>
